.header{
  height: 60px;
}

.banner{
  height: 800px;
}
.product{
  height: 1204px;
  margin-top: 60px;
  /* background-color: chartreuse; */
}
.about{
  height: 360px;
}
.topic{
  height: 774px;
  
}
.join{
  height: 300px;

}
.footer{
  height: 269px;
  background-color:#161616 ;
}
.header-c,
.product-c,
.about-c,
.topic-c,
.join-c,
.footer-c{
  width: 1440px;
  height: 100%;
  margin: 0 auto;
  /* overflow: hidden; */
  position: relative;
}

.header .logo{
  float: left;
  background: url(../image/logo.png) no-repeat center;
  width: 80px;
  height: 100%;
}
.header .nav{
  float: right;
}
.header .nav-item{
  float: left;

  margin-left: 78px;
}
.header .nav-item>a{
  display: block;
  width: 100%;
  height: 100%;
  color: #333;
  line-height: 60px;
}
.header .nav-item .search{
  vertical-align: middle;
}
.header .nav-item .line{
  display: block;
  width: 40px;
  height: 2px;
  background-color: #161616;
  margin: 0 auto;
  margin-top: -13px;
  opacity: 0;
}
.header .nav-item:hover .line{
  opacity: 1;
}
.banner{
  position: relative;
  background: url(../image/banner2.png) no-repeat;
  background-position: center;
  background-size: cover;
}
.banner .dot{
  position: absolute;
  bottom: 40px;
  left: 939px;
}
.banner .dot span{
  float: left;
  width: 20px;
  height: 20px;
  background-color: #d9d9d9;
  margin-left: 60px;
  border-radius: 50%;
}
 .dot .act:hover{
  background-color: #535353;
}
.hot{
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 150px;
}
.hot-item{
  float: left;
  width: 464px;
  height: 270px;
  margin-right: 24px;
  background-color: #FBF1EC;
}
.hot .info{
  width: 316px;
  height: 184px;
  margin-top: 43px;
  margin-left: 30px;
}
.info p{
  font-size: 22px;
  color: #161616;
  line-height: 30px;
  margin-top: 39px;
  margin-bottom: 20px;
}
.info a{
  font-size: 13px;
  color: #373737;
  line-height: 18px;
}
.hot-item.mr0{
  margin-right: 0;
}
.product-nav{
  width: fit-content;
  height: 25px;
  margin: 0 auto;
  margin-top: 150px;
}
.product-nav .nav-item2{
  float: left;
  font-size: 18px;
  margin-right: 80px;
}
.product-nav .nav-item2 a{
  color: #161616;
}
.product-nav .line{
  display: block;
  width: 30px;
  height: 2px;
  background-color: #161616;
  margin: 0 auto;
  margin-top: 6px;
  opacity: 0;
}
.product-nav .nav-item2:hover .line{
  opacity: 1;
}
.pro-card{
  overflow: hidden;
  margin-top: 60px;
}
.pro-card .item{
  float: left;
  width: 315px;
  height:489px;
  margin-right: 60px;
}
.pro-card .item.mr0{
  margin-right: 0;
}
.pro-card .name{
  height: 28px;
  line-height: 28px;
  margin-top: 15px;
}
.pro-card .l{
  float: left;
  font-size: 20px;
  line-height: 28px;
  color: #161616;
}
.pro-card .r{
  float: right;
  font-size: 16px;
  line-height: 22px;
  color: #161616;
}
.pro-card .type{
  font-size: 16px;
  line-height: 22px;
  color: #929292;
  margin-top: 4px;
}
.about{
  background: url(../image/未标题-1.png) no-repeat center;
}
.about .info{
  height: 213px;
  position: absolute;
  top: 74px;
  left: 80px;
}
.about .info .title{
  font-size: 24px;
  color: #161616;
  line-height: 33px;
  margin-bottom: 20px;
}
.about .info .des{
  font-size: 14px;
  line-height: 20px;
  color: #505050;
  margin-bottom: 40px;
}
.about .info .more{
  color: #ffffff;
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background-color: #161616;
  text-align: center;
}
.topic-item{
  height: 450px;
  margin-top: 150px;
  margin: 0 auto;
  margin-top: 150px;
}
.topic .card{
  position: relative;
  float: left;
  width: 450px;
  height: 450px;
  margin-right: 45px;
  background-color: pink;
}
.topic .card.mr0{
  margin-right: 0;
}
.topic .mask{
  position: absolute;
  bottom: 90px;
  background-color: #ffffff;
  opacity: 0.8;
  height: 100px;
  width: 100%;
  text-align: center;
}
.topic .mask .p1{
  font-size: 24px;
  line-height: 33px;
  color: #4b5751;
  margin-top: 23px;
}
.topic .mask .p2{
  font-size: 14px;
  line-height: 20px;
  color: #777777;
}
.join{
  text-align: center;
  background-color: #FBF1EC;
  padding-top: 0.1px;
}
.join .tittle{
  font-size: 35px;
  line-height: 49px;
  color: #161616;
  margin-top: -24px;

}
.join .mail{
  font-size: 14px;
  line-height: 20px;
  color: #9e9e9e;
  margin-top: 43px;
}
.join .mail a{
  color: #9e9e9e;
}
.join .mail .line{
  width: 750px;
  height: 2px;
  background-color: #d5d5d5;
  margin: 0 auto;
}
.join .sent{
  width: 120px;
  height: 40px;
  line-height: 40px;
  background-color: #161616;
  color: #ffffff;
  font-size: 14px;
  margin: 0 auto;
  margin-top: 44px;
  cursor: pointer;
}
.join .des{
  font-size: 14px;
  line-height: 20px;
  color: #777777;
  margin-top: 30px;
}
.footer dl{
  float: left;
  margin: 70px 60px;
  color: #ffffff;
}
.footer dt{
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 24px;
}
.footer dd{
  font-size: 12px;
  line-height: 17px;
}
.footer img{
  margin-right: 20px;
}
